<template>
    <div class="login_container" >
        <img class="card" src="../assets/img1.jpg" center center no-repeat></img>
        <!-- 登陆块 -->
        <div class="login_box">
            <!-- 登陆图片 -->
            <div class="avatar_box">
                <img src="../assets/logo.png" alt/>
            </div>
            <!-- 表单区域 -->
            <el-form ref="loginFormRef" :rules="loginRules" :model="loginForm" class="login_form" label-width="0">
                <!-- 用户名-->
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" prefix-icon="iconfont icondenglu"></el-input>
                </el-form-item>
                <!-- 密码-->
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" prefix-icon="iconfont iconmima" type="password"></el-input>
                </el-form-item>
                <!-- 验证码-->
                <el-form-item prop="vcode">
                    <el-input placeholder="请输入验证码" v-model="vcode" prefix-icon="iconfont iconmima" style="width: 50%"></el-input>
                    <span class="demonstration"></span>
                    <el-image
                            style="top:15px;width: 100px; height: 40px"
                            :src="src"  @click="getImage" :key="key"
                            :fit="fit"></el-image>
                </el-form-item>
                <!-- 按钮-->
                <el-form-item class="btns">
                    <el-button type="primary" @click="register()">前往注册</el-button>
                    <el-button type="primary" @click="login()" >提交</el-button>
                    <el-button type="info" @click="resetLoginForm()">重置</el-button>
                </el-form-item>

            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            let code = null;
            this.$http.get("login/getImage").then(function (resp) {
                code=resp.data.data;
            })
            return {
                vcode:null,
                t_code:'',
                code:"",
                src:"",
                key:"",
                fit: 'fill',
                // 'contain', 'cover', 'none', 'scale-down',
                url: '',
                //表单数据
                loginForm:{
                    username:"username",
                    password:"password"
                },
                //验证对象
                loginRules:{
                    //校验用户名
                    username:[
                        { required: true, message: '用户名为必填项', trigger: 'blur' },//必填项验证
                        { min: 4, max: 12, message: '长度在 4 ~ 12 个字符', trigger: 'blur' }//长度验证
                    ],
                    //校验密码
                    password:[
                        { required: true, message: '密码为必填项', trigger: 'blur' },//必填项验证
                        { min: 4, max: 12, message: '长度在 4 ~ 12 个字符', trigger: 'blur' }//长度验证
                    ],

                },
            };
        },
        created() {
            this.getImage();//获取验证码
            //回车登陆监听事件
            var _this = this;
            document.onkeydown = function(e) {
                let key = window.event.keyCode;
                if (key == 13) {
                    _this.login();
                }
            }

        },
        methods:{
            getImage(){   //获取验证码
                this.$http.get("/login/getImage").then((res)=>{
                    this.src = "data:image/png;base64,"+res.data.image;
                    this.key = res.data.key;
                    this.t_code=res.data.true_code;
                    console.log(this.t_code);
                });
            },
            //重置表单内容
            resetLoginForm(){
                this.$refs.loginFormRef.resetFields();
            },
            register(){
                this.$router.push({path:"/register"});
            },



            login() {
                //不区分大小写比较
                let a=this.t_code.toUpperCase()
                let b=this.vcode.toUpperCase()
                console.log(a==b)
                if(a!=b){
                    this.$message.error("验证码错误");
                }else{
                    //读取用户表信息
                    var id = "1";
                    var list = [];
                    window.sessionStorage.setItem("id", id);
                    window.sessionStorage.setItem("choice", "0");
                    this.$refs.loginFormRef.validate(async valid => {
                        if (!valid) return;
                        try {
                            const {data: res} = await this.$http.post("login/login", this.loginForm);//访问后台
                            if (res.flag == "ok") {
                                this.$message.success("登陆成功！！！");
                                window.sessionStorage.setItem("user", JSON.stringify(res.user));

                                this.$http.post("worker/findOne", res.user.id).then(function (resp) {
                                    var v = [
                                        resp.data.data[0]
                                    ]
                                    window.sessionStorage.setItem("name", v[0].name);
                                    window.sessionStorage.setItem("UserId", v[0].id);
                                })

                                if (res.user.role == 0) {
                                    await this.$router.push({path: "/home"});//页面路由跳转
                                } else if (res.user.role == 1) {
                                    await this.$router.push({path: "/admin"});//页面路由跳转
                                }
                            } else if (res.flag == "error") {
                                this.$message.error("用户名或密码错误!");
                            }
                        }catch (e) {
                            if(e.toString()=="Error: Network Error"){
                                this.$message.error("网络连接出错!");
                            }
                        }


                    })
                }

            },

        },
    }
</script>

<style lang="less" scoped>
    .card{
        width: 100%;
        height: 100%;
        -webkit-filter: blur(5px);
        -moz-filter: blur(15px);
        -o-filter: blur(15px);
        -ms-filter: blur(15px);
    }
    .login_container{
        //根节点样式
       // background: url('../assets/img1.jpg') center center no-repeat;
        height: 100%;
    }
    .login_box{
        //background: url('../assets/img1.jpg') center center no-repeat;
        width: 450px;
        height: 300px;
        border-radius: 3px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        .avatar_box{
            top:-40px;
            width: 130px;
            height: 130px;
            border: 1px solid #eee;
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 0 10px #ddd;
            position: absolute;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: #0ee;
            img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: #eee;

            }
        }
    }
    .btns{
        display: flex;
        justify-content: flex-end;
    }
    .login_form{
        position: absolute;
        bottom: 0%;
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }

</style>